<template>
  <div class="h-full w-full p-4">
    <div class="query-section">
      <el-form :model="dataForm" label-width="140" class="" style="max-width: 400px">

        <el-form-item label="应用名称：" required>
          <el-input v-model="dataForm.name" clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="应用唯一编码：" required>
          <el-input v-model="dataForm.appCode" clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="应用图标：" required>
          <div class="cursor-pointer" @click="onIconClick">
            <svg class="icon h-10 w-10" style="" aria-hidden="true">
              <use :href="'#'+dataForm.logo"></use>
            </svg>
          </div>
        </el-form-item>
        <el-form-item label="应用简介：">
          <el-input v-model="dataForm.remark" type="textarea" clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="应用排序：">
          <el-input-number v-model="dataForm.seq" clearable placeholder="请输入"/>
        </el-form-item>

        <el-button type="primary" @click="getTableDataList(1)">保存</el-button>

      </el-form>
    </div>
    <application-icon-selector-dialog ref="applicationIconSelectorDialogRef" @update:icon="(e)=>{dataForm.logo=e}"/>
  </div>
</template>

<script setup>
/////////////////////////////////   外部依赖导入    //////////////////////////
import {onMounted, onUnmounted, ref, reactive} from 'vue'
import {useRoute, useRouter} from 'vue-router';
import defaultLogo from "@/assets/images/default-logo.png";
import defaultAvatar from "@/assets/images/default-avatar.jpg";
import {$localStorage} from "@/utils/application-storage.js";
import $apiService from "@/axios/api.js";
import {ENABLE_OPTIONS, PUBLISH_OPTIONS} from "@/utils/constant.js";
import $message from "@/utils/message.js";
import ApplicationIconSelectorDialog from "@/views/Application/Setting/component/ApplicationIconSelectorDialog.vue";


/////////////////////////////////   私有变量定义    //////////////////////////
const $router = useRouter();
const $route = useRoute();

const tenantInfo = ref({
  id: "",
  logo: defaultLogo,
  tenantCode: '',
  systemName: ''
})
const myProfile = ref({
  avatarUrl: defaultAvatar,
  realName: ''
})
const dataForm = ref({})
const tableData = reactive({
  content: [],
  totalElements: 1,
})
let tableLoading = ref(false)
const applicationIconSelectorDialogRef = ref(null);

/////////////////////////////////   生命周期方法 //////////////////////////
onMounted(() => {
  tenantInfo.value = $localStorage.getTenantInfo()
  myProfile.value = $localStorage.getMyProfile()
  getTableDataList()
});
onUnmounted(() => {
});

/////////////////////////////////   页面方法    //////////////////////////
const getTableDataList = (page) => {
  tableLoading = true
  $apiService.getTenantApplicationOne({"params": {"id": $route.params.applicationId}}).then((res) => {
    dataForm.value = res.data
  }).finally(() => {
    tableLoading = false
  })
}
const doPublish = ({id}) => {
  $apiService.saveCustomProcess({id, definitionStatus: 'Yes'}).then((res) => {
    $message.success('已发布')
    getTableDataList()
  })
}
const onIconClick = () => {
  applicationIconSelectorDialogRef.value.show()
}
</script>

<style scoped>
</style>
